<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <style>
            .highcharts-button {
                display: none !important;
            }
        </style>
        <script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                chartT = $('#container').highcharts({
                    chart: {
                        type: 'areaspline'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 0,
                        y: 0,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: 'transparent',
                    },
                    xAxis: {
                        gridLineWidth: 0,
                        tickWidth: 0,
                        lineWidth: 0,
                        categories: ["Sep 10", "Sep 11", "Sep 12", "Sep 13", "Sep 14", "Sep 15", "Sep 16"]
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        showFirstLabel: false,
                        gridLineColor: '#C0C0C0',
                        gridLineDashStyle: 'Dot',
                        gridLineWidth: 0,
                        labels: {
                            formatter: function() {
                                return this.value / 1000 + 'k';
                            }
                        },
                        endOnTick: false,
                        maxPadding: 0.1
                    },
                    tooltip: {
                        shared: true,
                        valueSuffix: ' mentions'
                    },
                    plotOptions: {
                        area: {
                            fillOpacity: 1
                        },
                        series: {
                            marker: {
                                fillColor: 'transparent',
                                lineWidth: 0,
                                lineColor: 'transparent', // inherit from series
                                states: {
                                    hover: {
                                        lineWidth: 1,
                                        radius: 4,
                                        lineColor: '#EEE',
                                        fillColor: '#FFF'
                                    }
                                }
                            }
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                            name: 'Negative',
                            data: [1700, 800, 1076, 1408, 2547, 1929, 1928],
                            color: "#EA4037",
                            fillOpacity: 1
                        }, {
                            name: 'Neutral',
                            data: [800, 700, 911, 1033, 2201, 1767, 1766],
                            color: "#000000",
                            fillOpacity: 1
                        },
                        {
                            name: 'Possitive',
                            data: [502, 635, 809, 947, 1402, 334, 1268],
                            color: "#66C36B",
                            fillOpacity: 1
                        }]
                }, function(chart) {
                    chart.yAxis[0].update({
                        labels: {
                            enabled: false
                        },
                        title: {
                            text: null
                        }
                    });
                });
            });


        </script>
    </head>
    <body>
        <script src="libs/highchart/js/highcharts.js"></script>
        <script src="libs/highchart/js/modules/exporting.js"></script>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>
